<template>
  <ModalCpt
    :title="'回复@' + username"
    @close-modal="closeModal"
  >
    <template #content>
      <TextareaInputCpt @content-change="contentChange" />
    </template>
    <template #footer>
      <el-button
        type="primary"
        :loading="loading"
        round
        @click="reply"
      >
        回复
      </el-button>
    </template>
  </ModalCpt>
</template>

<script lang="ts" scoped>
import ModalCpt from '@/components/Modal/index.vue'
import TextareaInputCpt from '@/components/TextareaInput/index.vue'
import { defineComponent, ref, inject } from 'vue'
import { userStore } from '@/store/user'

const store = userStore()

export default defineComponent({
  name: 'ReplyCpt',
  components: {
    ModalCpt, TextareaInputCpt
  },
  props: {
    username: {
      type: String,
      default: ''
    }
  },
  emits: {
    reply: (payload: any) => {
      return payload
    },
    'close-reply': (payload: any) => {
      return payload
    }
  },
  setup (props, { emit }) {
    const $newmessage:any = inject('$newmessage')
    const loading = ref(false)
    const content:any = ref(null)

    const contentChange = (newVal:any) => {
      content.value = newVal
    }
    const reply = () => {
      if (!store.userInfo) {
        $newmessage('暂未登录，请登录！', 'warning')
        return
      }
      if (content.value.length < 5) {
        $newmessage('回复内容至少5个字符~', 'warning')
        return
      }
      loading.value = !loading.value
      emit('reply', content.value)
    }
    const closeModal = () => {
      loading.value = false
      emit('close-reply', null)
    }

    return { loading, contentChange, reply, closeModal }
  }
})
</script>

<style lang="scss" scoped>
@import '@/assets/css/constant.scss';

.mask-wrap {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 100;
  background-color: $theme-color8;
  .reply-wrap {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 600px;
    background: $theme-color6;
    border: 1px solid $theme-color4;
    border-radius: 12px;
    padding: 20px;
    .title {
      display: flex;
      justify-content: space-between;
      align-items: center;
      .username {
        font-weight: bold;
      }
    }
    .content {
      margin-top: 26px;
    }
    .btn {
      margin-top: 20px;
      text-align: right;
    }
  }
}
</style>
